<template>
  <div>
    <MkBillPanel ref='billPanelRef' printCode='InvYueXue' :bill="ctx.zhuBiao" id="billPanelRef" :show-base-info="false">
      <template #button>
        <MkButtonQueryHistory @click="listRef.open()" />
        <MkButtonAdd @click="newZhuBiao" :isEdit='ctx.isEdit' />
        <MkButtonSubmit @click="submit" :loading="ctx.loading" :isEdit="ctx.isEdit" />
        <MkButtonMore>
          <a-menu-item @click="cancel">作废</a-menu-item>
          <a-menu-item @click="billPanelRef.showCaoZuo()">操作记录</a-menu-item>
        </MkButtonMore>
        <MkButtonMore title="打印" icon="ele-Printer">
          <a-menu-item>
            <el-button v-print="{ id: 'billPanelRef' }" type="text">打印</el-button>
          </a-menu-item>
        </MkButtonMore>
      </template>
      <div style=" flex: 1; height: inherit;">
        <MkDragSplitPanel class="mk-panel" style="height: auto; flex: 1;" left-width="650px">
          <template #left>
            <MkPanel title="基本信息">
              <MkForm :model='ctx.zhuBiao' ref='formRef' formId='InvYueXue' :col="2">
                <MkInput label='订血医院' v-model='ctx.zhuBiao.dingXueYiYuan' prop='dingXueYiYuan' :isEdit='false'
                  required />
                <MkSelect label='订血类型' v-model='ctx.zhuBiao.dingXueLeiXing' prop='dingXueLeiXing'
                  :options="['当日订血', '紧急订血', '预定用血']" selectId="yueXue_dingXueLeiXing" :isEdit='ctx.isEdit' />
                <MkSelect label='发血类型' v-model='ctx.zhuBiao.faXueLeiXing' prop='faXueLeiXing' :isEdit='ctx.isEdit'
                  :options="['普通发血', '紧急发血']" selectId="yueXue_faXueLeiXing" />
                <MkSelect label='发血方式' v-model='ctx.zhuBiao.faXueFangShi' prop='faXueFangShi' :isEdit='ctx.isEdit'
                  :options="['默认', '血站送血', '医院取血']" selectId="yueXue_faXueFangShi" />
                <MkDatePicker label='需求日期' v-model='ctx.zhuBiao.xuQiuRiQi' prop='xuQiuRiQi' :isEdit='ctx.isEdit'
                  required />
                <MkInput label='附加说明' v-model='ctx.zhuBiao.fuJiaShuoMing' prop='fuJiaShuoMing' :isEdit='ctx.isEdit'
                  :col="2" />
                <MkInput label='订血回复' v-model='ctx.zhuBiao.remark' prop='remark' :isEdit='false' :col="2" />
                <MkInput label='发血单号' v-model='ctx.zhuBiao.faXueDanHao' prop='faXueDanHao' :isEdit='false' />
              </MkForm>
            </MkPanel>
          </template>
          <template #right>
            <MkPanel title="约血预警" style="max-width: 1050px;" class="no-print">
              <MkTable :data="ctx.yueXueYuJingList" style="width: 565px;" :cell-style="yuJingCellStyle">
                <MkColumn prop="daLei" label="血液大类" width="65px" align="center" />
                <el-table-column label="A" width="65px" align="center">
                  <el-table-column prop="yuJingZhiA" label="预警值" width="60px" align="center" />
                  <el-table-column prop="chuKuLiangA" label="已出库量" width="65px" align="center" />
                </el-table-column>
                <el-table-column label="B" width="65px" align="center">
                  <el-table-column prop="yuJingZhiB" label="预警值" width="60px" align="center" />
                  <el-table-column prop="chuKuLiangB" label="已出库量" width="65px" align="center" />
                </el-table-column>
                <el-table-column label="O" width="65px" align="center">
                  <el-table-column prop="yuJingZhiO" label="预警值" width="60px" align="center" />
                  <el-table-column prop="chuKuLiangO" label="已出库量" width="65px" align="center" />
                </el-table-column>
                <el-table-column label="AB" width="65px" align="center">
                  <el-table-column prop="yuJingZhiAB" label="预警值" width="60px" align="center" />
                  <el-table-column prop="chuKuLiangAB" label="已出库量" width="65px" align="center" />
                </el-table-column>
              </MkTable>
            </MkPanel>
          </template>
        </MkDragSplitPanel>
      </div>
      <div style="display: flex; height: inherit;">
        <MkPanel title="新增" v-if="ctx.isEdit" style="width:300px">
          <template #header>
            <div class="title">
              <div>新增</div>
              <MkButtonAdd @click="addMingXi" :loading="ctx.loading">添加</MkButtonAdd>
            </div>
          </template>
          <MkForm :model='ctx.mingXi' ref='formMingXiRef' formId='InvRuKuMingXi'>
            <MkSelectBasEntity label='血液品种' v-model='ctx.mingXi.xueYePinZhong' prop='xueYePinZhong' required
              :isEdit='ctx.isEdit' entity="BasXueYePinZhong" @change="handlePinZhongChange" />
            <MkSelect label='Rh(D)' v-model='ctx.mingXi.rhD' prop='rhD' required :isEdit='ctx.isEdit'
              :options="['+', '-']" selectId="yueXue_RhD" />
            <MkInputNumber label='A型容量' v-model='ctx.mingXi.rongLiangA' prop='rongLiangA' :isEdit='ctx.isEdit'>
              <template #suffix>
                <span>{{ ctx.mingXi.danWei }}</span>
              </template>
            </MkInputNumber>
            <MkInputNumber label='B型容量' v-model='ctx.mingXi.rongLiangB' prop='rongLiangB' :isEdit='ctx.isEdit'>
              <template #suffix>
                <span>{{ ctx.mingXi.danWei }}</span>
              </template>
            </MkInputNumber>
            <MkInputNumber label='O型容量' v-model='ctx.mingXi.rongLiangO' prop='rongLiangO' :isEdit='ctx.isEdit'>
              <template #suffix>
                <span>{{ ctx.mingXi.danWei }}</span>
              </template>
            </MkInputNumber>
            <MkInputNumber label='AB型容量' v-model='ctx.mingXi.rongLiangAB' prop='rongLiangAB' :isEdit='ctx.isEdit'>
              <template #suffix>
                <span>{{ ctx.mingXi.danWei }}</span>
              </template>
            </MkInputNumber>
          </MkForm>
        </MkPanel>
        <MkTable :data="ctx.mingXiList">
          <MkColumnIndex />
          <MkColumnBasEntity prop="xueYePinZhong" label="血液品种" entity="BasXueYePinZhong" :col="1.5" />
          <el-table-column prop="rhD" label="Rh(D)">
            <template #default="{ row }">
              <span v-if="row.rhD == '-'" style=" background-color: black; color: white; padding: 2px;"> 阴性 </span>
              <span v-else> {{ row.rhD }}</span>
            </template>
          </el-table-column>
          <MkColumnNumber prop="rongLiangA" label='A型容量' />
          <MkColumnNumber prop="rongLiangB" label='B型容量' />
          <MkColumnNumber prop="rongLiangO" label='O型容量' />
          <MkColumnNumber prop="rongLiangAB" label='AB型容量' />
          <MkColumnNumber prop="xiaoJi" label='小计' />
          <MkColumn prop="danWei" label='单位' />
          <MkColumnOption @show="showMingXi" :isMore="true" v-if="ctx.isEdit" @delete="deleteMingXi" />
        </MkTable>
      </div>
    </MkBillPanel>

    <EditPage ref='editPageRef' @updateMingXi="updateMingXi" />
    <ListPage ref='listRef' @load='loadZhuBiao' />
  </div>
</template>

<script setup lang="ts" name="invYuYue">
/* 血液预约   ===== 功能全部特性 =====  已完成的功能在行前添加 - 同步到详细设计文档
- RhD阴性要特别显示:黑底白字
- 订血类型等下拉框支持自定义选项
- 每个品种只能添加一行
- 支持修改和删除明细
- 订血回复不可编辑, 由血库2回写
- 订单提交后是待审核,输血科审批后是已生效
- 只有待审核的单据可以作废
- 作废单据要添加操作记录
- 新增明细表单中选择了品种后,自动切换ABO血型各容量输入框的单位显示对应的单位
- 查询和审核接口不鉴权,给血库2使用
- 打印功能: 保存过的单据可以直接打印界面
*/
import ListPage from './list.vue'
import EditPage from './edit.vue';

import {
  ctx,
  formMingXiRef, formRef, listRef, billPanelRef, editPageRef,
  newZhuBiao, loadZhuBiao, submit, cancel,
  addMingXi, showMingXi, updateMingXi, deleteMingXi, handlePinZhongChange,
  getYuJingShuju, yuJingCellStyle
} from './index'
onMounted(() => {
  getYuJingShuju()
})
</script>

<style lang='scss' scoped>
.title {
  font-size: 1.2rem;
  display: flex;
  justify-content: space-between;
}
</style>